<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 16:49:08
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:33
-->
<template>
  <div class="search">
    <div class="wrapper">
      <span style="position: relative; left: 39%">手机号</span>
      <el-input
        placeholder="请输入内容"
        v-model="input"
        clearable
        style="width: 200px; margin-left: 40%"
      >
      </el-input>
      &nbsp;&nbsp;<el-button round @click="searchApplyQuery()"
        >搜索</el-button
      >
      <h2>报名的游学项目</h2>
      <div class="applyQuery" v-for="item in details" :key="item.id">
        <div class="left">
          <img width="100%" :src="item.project.figure" />
        </div>
        <div class="right">
          <div class="name" style="font-size:16px;font-weight:800">{{ item.project.name }}</div>
          <div class="time">
            时间：{{ item.project.beginTime | fmtDate }} - {{ item.project.endTime | fmtDate }}
          </div>
          <div class="recommend">费用：{{item.project.recommend}}元</div>
          <div class="insertTime">报名时间：{{item.insertTime}}</div>
          <div class="status">报名状态：{{item.status}}</div>
          <div class="introduce">简介：{{ item.project.introduce }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "../utils/request";
export default {
  data() {
    return {
      input: "",
      details: [],
    };
  },
  methods: {
    searchApplyQuery() {
      get("/index/apply/query", { telephone: this.input }).then((res) => {
        if ((res.status = 200)) {
          this.details = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
  },
  created() {},
};
</script>
<style lang="scss" scope>
.search {
  h2 {
    margin-left: 1%;
  }
  .wrapper {
    width: 1240px; 
    .applyQuery {
      display: flex;
      padding: 1em 0;
      border-bottom: 1px solid #f4f4f4;
      .left {
        width: 300px;
        // height: 200px;
        // background-color: pink;
        border-radius: 5px;
        overflow: hidden;
      }
      .right {
        flex: 1;
        padding: 0 2em;
        .name {
          font-weight: 500;
          font-size: 15px;
        }
        .time {
          margin: 1em 0;
        }
      }
    }
  }
}
</style>